<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>团购列表 - Powered By ${systemConfig.systemName}</title>
<meta name="Author" content="webmall Team" />
<meta name="Copyright" content="webmall" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<#include "/WEB-INF/template/common/include.ftl">
<link href="${base}/template/shop/css/login.css" rel="stylesheet" type="text/css" />
<link href="${base}/template/shop/css/register.css" rel="stylesheet" type="text/css" />
<link href="${base}/template/shop/css/product.css" rel="stylesheet" type="text/css" />
<link href="${base}/template/shop/css/product_content.css" rel="stylesheet" type="text/css" />
<link href="${base}/template/webmall/css/groupbuy.css" rel="stylesheet" type="text/css" />
<link href="${base}/template/common/paper/paper.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${base}/template/shop/js/login.js"></script>
<script type="text/javascript" src="${base}/template/shop/js/register.js"></script>
<script type="text/javascript" src="${base}/template/common/paper/paper.js"></script>

<script type="text/javascript">
$().ready( function() {

	$addCartItem = $(".addCartItem");
	$addCartItemTip = $("#addCartItemTip");
	$productListForm = $("#productListForm");
	$tipClose = $("#addCartItemTip .tipClose");
	
	$addCartItemTipMessageIcon = $("#addCartItemTipMessageIcon");
	$addCartItemTipMessage = $("#addCartItemTipMessage");
	$addCartItemTipInfo = $("#addCartItemTipInfo");
	
	
	
	
	
	$(".groupbuy .scrollable").scrollable({
		speed: 600
	});
	
	  $("a.jqzoom_item").click(function () {
		  $(".jqzoom").attr('src',$(this).find("img").attr("mid"));
		  $(".jqzoom").attr('rel',$(this).find("img").attr("big"));
		  return false;
	  });
	
	$(".groupbuy .filter ul li.kind a div").click(function () 
	{
		$(".groupbuy .filter ul li.kind a div").each(function() {
			$this = $(this);
			$(this).removeClass("checked");
		})
		$(this).addClass("checked"); 
	});
	$(".groupbuy .filter ul li.price a div").click(function () 
	{
		$(".groupbuy .filter ul li.price a div").each(function() {
			$this = $(this);
			$(this).removeClass("checked");
		})
		$(this).addClass("checked"); 
	});
	
	$('.tab_parent').each(function(i){

		$("#"+this.id +" ul.tab_head").tabs("#"+this.id +" .tabContent", {
			effect: "fade",// 逐渐显示动画
			fadeInSpeed: 500,// 动画显示速度
			event: "click"// 触发tab切换的事件
		});
		
		$('.corner').corner("round 4px");
		
	 });
	 
	 $(".minus").click(function(){	
		var rId = this.getAttribute("rId");	
		var obj = $("#"+rId);
		if(parseInt(obj.val())>1)
			obj.val(parseInt(obj.val())-1);
		obj.trigger("onchange");
	})
	$(".plus").click(function(){
		var rId = this.getAttribute("rId");	
		var obj = $("#"+rId);
		obj.val(parseInt(obj.val())+1);
		obj.trigger("onchange");
	});
	
	$("#addConsultForm").validate({
		invalidHandler: function(form, validator) {
			$.each(validator.invalid, function(key, value){
				$.tip(value);
				return false;
			});
		},
		errorPlacement:function(error, element) {},
		submitHandler: function(form) {
			if ($.cookie("loginMemberUsername") == null) {
				$.flushHeaderInfo();
				$.loginWindowShow();
				return false; 
			} else {
				$("#addConsultForm").attr("disabled", true);
				$("#addConsultForm").ajaxSubmit({
					dataType: "json",
					success: function(data) {
						if (data.status == "success") {
							$.tip(data.status, data.message);
							$("#keyword").val("");
							$("#productConsultContent").val("");
						} else {
							$("#loginWindowCaptcha").val("");
							$.tip(data.status, data.message);
						}
						$("#addConsultForm").attr("disabled", false);
						loadingConsult();
					}
				});
			}
		}
	});
	
	$("#searchConsultForm").validate({
		invalidHandler: function(form, validator) {
			$.each(validator.invalid, function(key, value){
				$.tip(value);
				return false;
			});
		},
		errorPlacement:function(error, element) {},
		submitHandler: function(form) {
		loadingConsult();
		}
	});
	
	$(".consult .categoryNum ul li").click( function(event) {
		$(".consult .categoryNum ul li ").each(function() {
			$this = $(this);
			$(this).removeClass("all_comment");
		})
		$(this).addClass("all_comment"); 
		var $this = $(this);
		$('#'+$(this).metadata().elementId).val($(this).metadata().value);
		
		$('#searchConsultForm').submit();
	});
	
	
	$(".summery .categoryNum ul li").click( function(event) {
		$(".summery .categoryNum ul li ").each(function() {
			$this = $(this);
			$(this).removeClass("all_comment");
		})
		$(this).addClass("all_comment"); 
		
		var $this = $(this);
		$('#'+$(this).metadata().elementId).val($(this).metadata().value);
		loadingComment();
	});
	
	
	// 添加商品至购物车
	$addCartItem.click( function() {
	try
	{
		var $this = $(this);
		var id = $this.metadata().id;
		var type = $this.metadata().type;
		
		var x = $this.offset().left - 50;
		var y = $this.offset().top + $this.height() + 6;
		$addCartItemTip.css({"left" :x, "top" :y});
		
		var quantity = $("#quantity").val();
		if (quantity == null) {
			quantity = 1;
		}
		var reg = /^[0-9]*[1-9][0-9]*$/;
		if (!reg.test(quantity)) {
			$addCartItemTipMessageIcon.removeClass("successIcon").addClass("errorIcon");
			$addCartItemTipMessage.text("加入购物车失败！");
			$addCartItemTipInfo.text("商品数量必须为正整数！");
			$addCartItemTip.fadeIn();
			return false;
		}
		$.ajax({
			url: commonUtil.base + "/shop/cart_item!ajaxAdd.action",
			data: {"id": id,"type":type, "quantity": quantity},
			dataType: "json",
			beforeSend: function() {
				$this.attr("disabled", true);
			},
			success: function(data) {
				$.flushCartItemList();
				if (data.status == "success") {
					$addCartItemTipMessageIcon.removeClass("errorIcon").addClass("successIcon");
					$addCartItemTipMessage.text(data.message);
					$addCartItemTipInfo.text("共计商品：" + data.totalQuantity + "件，总计金额：" + data.totalPrice);
					$("#shoppingcar").html(data.totalQuantity);
				} else if (data.status == "error") {
					$addCartItemTipMessageIcon.removeClass("successIcon").addClass("errorIcon");
					$addCartItemTipMessage.text(data.message);
					$addCartItemTipInfo.empty();
				}
				$addCartItemTip.fadeIn();
				$this.attr("disabled", false);
			},
			error: function(data) {
				alert(data);
			}
		});
		}
		catch(e)
		{
			alert(e);
		}
		
	});
	
	
	
	
	
	
	
	
	loadingComment();
	loadingConsult();
	
})


function loadingConsult(page)
{
	if(page==undefined||page==null || isNaN(page) || page < 1)
	{
		page=1;
	}
	$('#ajaxProductConsult').html("loading...");
	$.ajax({
		url: "${base}/shop/member!ajaxConsult.action?id=${groupbuy.product.id}&pager.pageNumber="+page,
		dataType: "text",
		data: "pager.keyword="+$('#keyword').val()+"&consultType="+$('#consultType').val(),
		async: true,
		success: function(data) {
		var result = data.split('#$#');
			$('#ajaxProductConsult').html(result[0]);
			page_cousult = new showPages('page_cousult','','loadingConsult',page,'');
			page_cousult.pageCount =result[1];
			page_cousult.printHtml("pageBar_cousult",6);
		}
	});
}

function loadingComment(page)
{
	if(page==undefined||page==null || isNaN(page) || page < 1)
	{
		page=1;
	}
$('#ajaxProductComment').html("loading...");
	$.ajax({
		url: "${base}/shop/member!ajaxComment.action?id=${groupbuy.product.id}&pager.pageNumber="+page,
		dataType: "text",
		data: "rank="+$('#commentRank').val(),
		async: true,
		success: function(data) {
		var result = data.split('#$#');
			$('#ajaxProductComment').html(result[0]);
			
			page_comment = new showPages('page_comment','','loadingComment',page,'');
			page_comment.pageCount =result[1];
			page_comment.printHtml("pageBar_comment",6);
		}
	});
}
	
</script>
</head>

<body class="groupbuy">
<div id="addCartItemTip" class="addCartItemTip">
	<div class="top">
		<div class="tipClose addCartItemTipClose"></div>
	</div>
	<div class="middle">
		<p>
			<span id="addCartItemTipMessageIcon">&nbsp;</span>
			<span id="addCartItemTipMessage"></span>
		</p>
		<p id="addCartItemTipInfo" class="red"></p>
		<input type="button" class="formButton tipClose" value="继续购物" hidefocus="true" />
		<input type="button" class="formButton" onclick="location.href='${base}/shop/cart_item!list.action'" value="进入购物车" hidefocus="true" />
	</div>
	<div class="bottom"></div>
</div>
<#include "/WEB-INF/template/shop/groupbuyheader.ftl">
<div class="body">
	<div class="bodyLeft">
		<div class="groupbuyContent">
			<div class="detailTop">
				<div class="groupName">
					${groupbuy.name}
				</div>
				<div class="desc">
					
					<div class="group_detail_img">
					
						
						<div class="productImage">
		                	<#list groupbuy.product.productImageList as list>
		                		<#if (list_index==1)>
									<#break />
								</#if>
								<img class="bigImg jqzoom" src="${base}${list.smallProductImagePath}" rel="${base}${list.bigProductImagePath}">
							</#list>
							<#if groupbuy.product.productImageList == null>
								<img class="bigImg jqzoom" src="${base}${systemConfig.defaultSmallProductImagePath}" rel="${base}${systemConfig.defaultBigProductImagePath}"></a>
		                	</#if>
	                	</div>
	                	
	                	
	                	
						<div class="productDetailSide">
							<div class="prices">
							￥${groupbuy.price}
							</div>
							<input type="button" class="addCartItem buyBtn {id: '${groupbuy.id}',type:'g'}" value="团购" hidefocus="true" />
						</div>
						<div class="productBuy">
							<div class="buyCount">
								我要买:<input class="minus" rId="quantity" type="button" value="-" />
									<input type="text" class="plusNum" id="quantity" value="1" />
									<input class="plus" rId="quantity" type="button" value="+" />
							</div>
						</div>
						<div class="buyInfo">
							<div class="headInfo">
								<div>原价</div><div>折扣</div><div>节省</div>
								<div>${groupbuy.product.price}</div><div>${groupbuy.discount}</div><div>${groupbuy.product.price-groupbuy.price}</div>
							</div>
						</div>
	                	
						<div class="thumbnailProductImage">
							<a class="prev browse" href="javascript:void(0);" hidefocus="true"></a>
							<div class="scrollable">
								<ul class="items productImageTab">
									<#if (groupbuy.product.productImageList == null)!>
										<li>
											<a href="#" class="jqzoom_item">
											<img src="${base}${systemConfig.defaultThumbnailProductImagePath}"  mid="${base}${systemConfig.defaultSmallProductImagePath}" big="${base}${systemConfig.defaultBigProductImagePath}" />
											</a>
										</li>
		                        	</#if>
		                        	<#list (groupbuy.product.productImageList)! as list>
										<li>
											<a href="#" class="jqzoom_item">
											<img src="${base}${list.thumbnailProductImagePath}"  mid="${base}${list.smallProductImagePath}" big="${base}${list.bigProductImagePath}" />
											</a>
										</li>
									</#list>
								</ul>
							</div>
							<a class="next browse" href="javascript:void(0);" hidefocus="true"></a>
						</div>
						
					</div>
				</div>
			</div>
			<div class="blank"></div>
			<div class="tab_parent" id="tab_productionDetail">
				<div class="tabHead">
					<ul class="tab_head">
						<li>
							<a href="javascript:void(0);" class="current" hidefocus="true">商品介绍</a>
						</li>
						<li>
							<a href="javascript:alert(1);" name="productAttribute" hidefocus="true">规格参数</a>
						</li>
						<li>
							<a href="javascript:void(0);" name="productAttribute" hidefocus="true">包装清单</a>
						</li>
						<li>
							<a href="javascript:void(0);" name="productAttribute" hidefocus="true">售后服务</a>
						</li>
						<li>
							<a href="javascript:void(0);" name="productAttribute" hidefocus="true">商品评论</a>
						</li>
						<li>
							<a href="javascript:void(0);loadingConsult();" name="productAttribute" hidefocus="true">购买咨询</a>
						</li>
					</ul>
				</div>
				<div class="tabContent">
					${groupbuy.desc}
				</div>
				<div class="tabContent">
					<table class="productAttributeTable">
						<#list (groupbuy.product.productType.enabledProductAttributeList)! as list>
							<#if (groupbuy.product.productAttributeMap.get(list) != null)!>
								<tr>
									<th>${list.name}</th>
									<td>
										<#list (groupbuy.product.productAttributeMap.get(list))! as attributeOptionList>
											${attributeOptionList}&nbsp;
										</#list>
									</td>
								</tr>
							</#if>
						</#list>
					</table>
				</div>
				<div class="tabContent">
					${groupbuy.product.packList}
				</div>
				<div class="tabContent">
					${groupbuy.product.afterService}
				</div>
				<div class="tabContent">
							<div class="summery">
								<div class="chartPercent">
										<input type="hidden" name="id" value="${groupbuy.product.id}" />
										<input type="hidden" id="commentRank" name="rank" value="" />
									<div class="left">
										<p>
										<span class="number">${productComment.getGoodDegree()}%</span>
										</p>
										<p>
										<span class="lable_number">
											好评度
										</span>
										</p>
									</div>
									<div class="right">
										<ul>
											<li><span>好评&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="progressBar" id="good_comment">0%</span></li>
											<li><span>中评&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="progressBar" id="normal_comment">0%</span></li>
											<li><span>差评&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="progressBar" id="bad_comment">0%</span></li>
										</ul>
									</div>
								</div>
								<div class="categoryNum">
									<ul>
										<li class="all_comment {elementId:'commentRank',value:'0~'}">全部评论</li>
										<li class="{elementId:'commentRank',value:'5~'}" >好评</li>
										<li class="{elementId:'commentRank',value:'3~4'}">中评</li>
										<li class="{elementId:'commentRank',value:'0~2'}">差评</li>
									</ul>
								</div>								
							</div>
							<script type="text/javascript">
								$().ready( function() {
									$("#good_comment").progressBar(${productComment.getGoodDegree()},{ barImage: '${base}/template/common/images/progressbg_yellow.gif'} );
									$("#normal_comment").progressBar(${productComment.getMidDegree()},{ barImage: '${base}/template/common/images/progressbg_yellow.gif'} );
									$("#bad_comment").progressBar(${productComment.getBadDegree()},{ barImage: '${base}/template/common/images/progressbg_yellow.gif'} );					
								})
							</script>
							
							<div id="ajaxProductComment">
								<#list (product.productCommentSet)! as list>
									<div class="productComment">
										<div class="left">
											<img src="${base}${list.member.headIcon}" />
											<p>${list.member.username}</p>
											<p>${list.member.memberRank.name}</p>
											<p>购买日期：${list.createDate}</p>
										</div>
										<div class="right">
											<div class="title">${list.title}<span class="createTime">${list.createDate}</span></div>
											<ul>
											<li>
											<span class="lable">优点：</span>${list.advantage}
											</li>
											<li>
											<span class="lable">不足：</span>${list.shortcoming}
											</li>
											<li>
											<span class="lable">使用心得：</span>${list.experience}
											</li>
											</ul>
										</div>
									</div>
									<div class="blank"></div>
								</#list>
							</div>
							
							<div id="pageBar_comment" class="pager">
							</div>
				</div>
				<div class="tabContent">
					<div class="consult">
						<div class="top">
						<div class="search_consult">
							<form id="searchConsultForm" action="${base}/shop/member!ajaxConsult.action" method="post">
								<input type="hidden" name="id" value="${groupbuy.product.id}" />
								<input type="hidden" id="consultType" name="consultType" value="" />
								<input type="text" id="keyword" name="pager.keyword" value="" />
								<input type="submit" class="btn_white" id="btn_submit" value="搜索" />
							</form>
						</div>
						<div class="submit_consult" style="display:block;">
							<form id="addConsultForm" action="${base}/shop/member!addConsult.action" method="post">
							<input type="hidden" name="id" value="${groupbuy.product.id}" />
							<div class="item" style="height:65px;display:block;">
								<select name="consult.type" class="formText {required: true, messages: {required: '请选择类型!'}}">
									<option value="1">
										商品咨询
									</option>
									<option value="2">
										库存及配送
									</option>
									<option value="3">
										支付问题
									</option>
									<option value="4">
										发票及保修
									</option>
									<option value="5">
										促销及赠品
									</option>
								</select>
								<textarea type="text" id="productConsultContent" name="consult.content" class="formText {required: true, messages: {required: '请填写内容!'}}"  ></textarea>						
								<input type="submit" class="btn_blue" id="btn_submit" value="发表咨询" />
							</div>
							</form>
						</div>
						</div>
						<div class="categoryNum">
							<ul>
								<li class="all_comment {elementId:'consultType',value:''}">全部咨询</li>
								<li class="{elementId:'consultType',value:'1'}" onclick="return false;">商品咨询</li>
								<li class="{elementId:'consultType',value:'2'}" onclick="return false;">库存及配送</li>
								<li class="{elementId:'consultType',value:'3'}" onclick="return false;">支付问题</li>
								<li class="{elementId:'consultType',value:'4'}" onclick="return false;">发票及保修</li>
								<li class="{elementId:'consultType',value:'5'}" onclick="return false;">促销及赠品</li>
							</ul>
						</div>	
						<div id="ajaxProductConsult">
						</div>
						<div id="pageBar_cousult" class="pager">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="bodyRight">
		<div class="announce">
			<div class="common_bg">公告板</div>
			<div class="content">
			<#list articleList as list>
				<ul>
					<#list (articleList)! as list>
						<li>
							<#if (list.title?length < 15)>
								<span class="icon">&nbsp;</span><a href="${base}${list.htmlFilePath}" title="${list.title}" target="_blank">${list.title}</a>
							<#else>
								<span class="icon">&nbsp;</span><a href="${base}${list.htmlFilePath}" title="${list.title}" target="_blank">${list.title[0..12]}...</a>
							</#if>
						</li>
						<#if list_index + 1 ==3>
							<#break/>
						</#if>
					</#list>
				</ul>
			</#list>
			</div>
		</div>
		<div class="blank"></div>
		<div class="announce">
			<div class="common_bg">开团时间表</div>
			<div class="content">
				<div class="clock">
					<img src="${base}/template/webmall/images/groupbuy/clock.png" style="float:left;" />
				</div>
				<div class="time">
				<span>早上：10:00</span>
				<span>中午：10:00</span>
				<span>晚上：10:00</span>
				</div>
			</div>
		</div>
	</div>
</div>
	<div class="blank"></div>
	<#include "/WEB-INF/template/shop/footer.ftl">
</body>
</html>